<template>
  <view class="container">
    <view class="option" @click="goToExam('mock')">
      <view class="icon-container">
        <!-- 示例图标，可以根据需要替换 -->
        <IconFont :name="document" size="100"  />
      </view>
      <text class="label">模拟考试</text>
    </view>

    <view class="option" @click="goToExam('real')">
      <view class="icon-container">
        <IconFont :name="checklist" size="100"  />
      </view>
      <text class="label">真题测试</text>
    </view>
  </view>
</template>

<script setup>
import { IconFont } from '@nutui/icons-vue'
import Taro from '@tarojs/taro'
import { ref} from 'vue'

const document = ref(require('../../assets/模拟考试.png'))
const checklist = ref(require('../../assets/真题.png'))
const goToExam = (type) => {
  if (type === 'mock') {
    Taro.navigateTo({ url: '/pages/test/mockTest' })
  } else if (type === 'real') {
    // Taro.navigateTo({ url: '/pages/real-test/index' })
  }
}
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
}

.option {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px 0;
  text-align: center;
}

.icon-container {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  // background-color: #e6f4ff;
  border-radius: 16px;
  margin-bottom: 12px;
}

.label {
  font-size: 45px;
  color: #333;
  margin-top: 8px;
}
</style>